<!DOCTYPE html>
<html>
<head>
<title>Three-Slit Interference Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '20px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters based on the diagram's proportions
    const x_barrier = 150;
    const barrier_width = 20;
    const slit_height = 18;
    
    const d_pixels = 80;
    const d_3_2_pixels = (3 / 2) * d_pixels;

    const y_center = 200; // y-coordinate of the center of the middle slit
    const y_top = y_center - d_pixels; // y-coordinate of the center of the top slit
    const y_bottom = y_center + d_3_2_pixels; // y-coordinate of the center of the bottom slit

    // Function to draw a hatched rectangle for the barrier
    function drawHatchedRect(x, y, w, h) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(x, y, w, h);
        // Draw the rectangle border
        ctx.lineWidth = 1.5;
        ctx.stroke();
        ctx.clip(); // Clip to the rectangle area to contain the hatches

        // Draw the diagonal hatch lines
        ctx.beginPath();
        const spacing = 5;
        for (let i = -h; i < w + h; i += spacing) {
            ctx.moveTo(x + i, y);
            ctx.lineTo(x + i - h, y + h);
        }
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.restore();
    }
    
    // Draw the barrier with slits by drawing the solid parts
    const x_rect = x_barrier - barrier_width / 2;
    // Top part of the barrier
    drawHatchedRect(x_rect, 50, barrier_width, y_top - slit_height / 2 - 50);
    // Barrier between top and middle slit
    drawHatchedRect(x_rect, y_top + slit_height / 2, barrier_width, y_center - slit_height / 2 - (y_top + slit_height / 2));
    // Barrier between middle and bottom slit
    drawHatchedRect(x_rect, y_center + slit_height / 2, barrier_width, y_bottom - slit_height / 2 - (y_center + slit_height / 2));
    // Bottom part of the barrier
    drawHatchedRect(x_rect, y_bottom + slit_height / 2, barrier_width, 400 - (y_bottom + slit_height / 2));

    // Reset line width for other elements
    ctx.lineWidth = 1.5;

    // Draw dimension lines to the left of the barrier
    const x_dim_line = 100;
    const tick_half_width = 10;
    ctx.beginPath();
    // Vertical line for dimensions
    ctx.moveTo(x_dim_line, y_top);
    ctx.lineTo(x_dim_line, y_bottom);
    // Horizontal T-marks
    ctx.moveTo(x_dim_line - tick_half_width, y_top);
    ctx.lineTo(x_dim_line + tick_half_width, y_top);
    ctx.moveTo(x_dim_line - tick_half_width, y_center);
    ctx.lineTo(x_dim_line + tick_half_width, y_center);
    ctx.moveTo(x_dim_line - tick_half_width, y_bottom);
    ctx.lineTo(x_dim_line + tick_half_width, y_bottom);
    ctx.stroke();

    // Draw dimension labels
    ctx.textAlign = 'center';
    ctx.fillText('d', x_dim_line - 30, (y_top + y_center) / 2);
    ctx.fillText('(3/2)d', x_dim_line - 40, (y_center + y_bottom) / 2);

    // Draw rays originating from the middle slit
    const ray_start_x = x_barrier;
    const ray_end_x = 480;
    const angle_rad = Math.atan(70 / (ray_end_x - ray_start_x));

    // Central ray (for θ=0)
    ctx.beginPath();
    ctx.moveTo(ray_start_x, y_center);
    ctx.lineTo(ray_end_x, y_center);
    ctx.stroke();

    // Angled ray
    const ray_end_y = y_center - (ray_end_x - ray_start_x) * Math.tan(angle_rad);
    ctx.beginPath();
    ctx.moveTo(ray_start_x, y_center);
    ctx.lineTo(ray_end_x, ray_end_y);
    ctx.stroke();

    // Draw angle arc and label
    const angle_arc_radius = 50;
    ctx.beginPath();
    ctx.arc(ray_start_x, y_center, angle_arc_radius, -angle_rad, 0);
    ctx.stroke();
    
    ctx.fillText('θ', ray_start_x + angle_arc_radius + 5, y_center - 18);
    
    // Draw the figure caption
    ctx.font = 'bold 20px serif';
    ctx.fillText('Fig. 2.3', 250, 430);

</script>
</body>
</html>